<template>
  <el-button @click="addSolution">写题解</el-button>
  <div class="s-container">
    <div v-for="s in solutions"
         :key="s.id"
        style="position: relative;margin-top: 30px"
    >
      <div class="teacher-icon" v-if="s.isTeacher">
        <span style="font-size: 20px">🌟</span> 教师回答
      </div>
      <el-card class="box-card"
               shadow="hover"
               @click="openDetail(s.id)">
        <template #header>
          <div class="s-title">
            {{ s.title }}
          </div>
        </template>
        <div class="s-summary">

          {{ s.summary }}
        </div>
        <div class="s-foot">
          <div class="s-nickname">
            作者 🙋： {{ s.nickname }}
          </div>
          <div class="s-time">
            创作日期⌚： {{ new Date(s.time * 1000).toLocaleDateString() }}
          </div>
        </div>
      </el-card>
    </div>

  </div>

</template>

<script>
import {Solution} from "../../utils/http/solutions";

export default {
  name: "ArticleList",
  data: function () {
    return {
      solutions: [],
      pid: this.$route.params.proId
    }
  },
  methods: {
    addSolution() {
      this.$goRoute(`/work/${this.pid}/article/edit`)
    },
    openDetail(id) {
      this.$goRoute(`/work/${this.pid}/article/${id}`)
    }
  },
  async mounted() {
    let resp = await Solution.getByPid(this.pid)
    if (resp.success) {
      this.solutions = resp.data.solutions;
    } else {
      this.$error("获取题解列表失败，请稍后重试")
    }
  }
}
</script>

<style scoped>
.s-container{
  height: calc(100vh - 140px);
  overflow-y: auto;
}
.box-card {
  font-size: 16px;
  margin: 20px;
  font-weight: normal;
  cursor: pointer;
  text-align: left;
}

.s-title {
  font-size: 20px;
  text-align: left;
  position: relative;
}

.s-summary {
  height: 100px;
}

.s-foot {
  display: flex;
  justify-content: space-between;
}

.teacher-icon{
  position: absolute;
  top: -20px;
  left: 10px;
  background: white;
  z-index: 9;
  color: #53a8ff;
  user-select: none;
  border: 1px solid #53a8ff;
  border-radius: 10px 0 0 0;
  padding: 3px;
  font-size: 16px;
}
</style>
